<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>文字审核</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/bootstrap-theme.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script type="text/javascript">
        function login() {
            showWaiting();
            $.ajax({
            //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "text",//预期服务器返回的数据类型
                url: "/review/checktext" ,//url
                data: $('#form').serialize(),
                success: function (result) {
                	hideWaiting();
                    console.log(result);//打印服务端返回的数据(调试用)
                    var str = result.replace(/\n/g,'<br>');
                    $("#result").html(str);
                    
                },
                error : function(result) {
                alert(result);
                	hideWaiting();
                    alert("异常！");
                }
            });
        }
        function showWaiting() {
            $('#waitingModal').modal({
            keyboard: false,
            backdrop: 'static',
            show: true
            });
        }
        function hideWaiting() {
             $('#waitingModal').modal('hide');
        }
        function clear(){
            $("#inputext").html("  ");
        }
        $(document).ready(function(){
            $("#inputext").click(function(){
            $("#result").html("检测结果");
            });
            $("#clearbutton").click(function(event) {
                /* Act on the event */
                $("#inputext").val(" ");
            });
        });
        </script>
    </head>
    <body>
        <center>
        <div class="jumbotron" style="width:90%; height:200px;" >
            <h1>文字审核</h1>
            <p>可以对文字进行审核，复制文字到下面文本框，可以查看是否存在敏感词汇</p>
        </div>
        <form id="form" onsubmit="return false"  method="POST"  >
            <div style="width:90%;height:300px">
                <textarea   type="textarea" name="text" value="" placeholder="输入要审核的文本" style="width:100%;height:100%;font-size:22px" id="inputext"></textarea>
            </div>
            <br>
            <button type="button" onclick="login()" class="btn btn-lg btn-primary">提交文字识别</button>
            <button id="clearbutton" type="button" onclick="clear()" class="btn btn-lg btn-primary">清空文本框</button>
        </form>

        <div class="alert alert-success" id="result" role="alert" style="font-size:22px;margin-top:10px;width:90%">
        <strong>检测结果</strong></div>
        <p id="" style="font-size:22px"></p>
        </center>
        <div class="modal fade" tabindex="-1" role="dialog" id="waitingModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">正在文字审核中...</h4>
                    </div>
                    <div class="modal-body">
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                                <span class="sr-only">100%</span>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" disabled class="btn btn-default" data-dismiss="modal">正在操作，请勿关闭或刷新页面！</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>